<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      left-arrow
      @click-left="goBack"
      fixed
    />
    
    <div class="content" style="padding-top: 46px; padding-bottom: 50px;">
      <template v-if="cartList.length">
        <van-checkbox-group v-model="checkedItems">
          <van-swipe-cell v-for="item in cartList" :key="item.id">
            <van-card
              :price="item.price"
              :title="item.title"
              :thumb="item.image"
            >
              <template #tags>
                <van-checkbox :name="item.id"/>
              </template>
              <template #footer>
                <van-stepper
                  v-model="item.quantity"
                  @change="updateQuantity(item.id, $event)"
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="removeItem(item.id)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox-group>
        
        <van-submit-bar
          :price="totalPrice"
          button-text="提交订单"
          @submit="onSubmit"
        />
      </template>
      <template v-else>
        <van-empty description="购物车空空如也"/>
      </template>
    </div>
    
    <!-- 底部导航 -->
    <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :badge="cartCount" to="/cart" :class="{ active: true }">购物车</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Cart',
  data() {
    return {
      checkedItems: []
    }
  },
  computed: {
    ...mapState({
      cartList: state => state.cartList
    }),
    cartCount() {
      return this.cartList.length || ''
    },
    totalPrice() {
      return this.checkedItems.reduce((total, id) => {
        const item = this.cartList.find(item => item.id === id)
        return total + item.price * item.quantity * 100
      }, 0)
    }
  },
  methods: {
    goBack() {
      if (this.$route.query.from === 'detail') {
        this.$router.back()
      } else {
        this.$router.push('/')
      }
    },
    updateQuantity(id, quantity) {
      this.$store.commit('updateCartItemQuantity', { id, quantity })
    },
    removeItem(id) {
      this.$store.commit('removeFromCart', id)
    },
    onSubmit() {
      if (this.checkedItems.length === 0) {
        this.$toast('请选择商品')
        return
      }
      this.$router.push('/checkout')
    },
    goToDetail(id) {
      this.$router.push({
        path: `/product/${id}`,
        query: { from: 'cart' }
      })
    }
  }
}
</script>

<style scoped>
.delete-button {
  height: 100%;
}

/* 调整内容区域的高度，为底部导航留出空间 */
.content {
  min-height: calc(100vh - 146px);
}

.van-tabbar-item.active {
  color: #1989fa;
}
</style> 